<template>
    <ChoiceExercise title="新单词" :exercise="exercise" :actived="actived">
        <div class="text-2xl mb-4">
            {{ exercise.word }}
        </div>

        <PhoneticSymbol
            class="mb-4"
            :autoplay="autoplay"
            :word="exercise.word"
        />

        <WordMeaning
            :class="
                exercise.resultCorrect == undefined
                    ? 'invisible select-none'
                    : ''
            "
            :word="exercise.word"
        />
    </ChoiceExercise>
</template>

<script setup lang="ts">
    import { NewWordExercise } from "../../model"
    import PhoneticSymbol from "../word/PhoneticSymbol.vue"
    import ChoiceExercise from "./ChoiceExercise.vue"
    import WordMeaning from "../word/WordMeaning.vue"

    defineProps<{
        exercise: NewWordExercise
        actived: boolean
        autoplay?: boolean
    }>()
</script>
